﻿<!DOCTYPE html>
<html>
<head>
    <title>Ectivise Cloud</title>
    <script src="https://code.jquery.com/jquery-1.9.1.min.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    <link rel="shortcut icon" type="image/png" href="http://www.ectivise.com/images/colors/green/logo.png"/>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!--<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.1.0/css/bootstrap.min.css">-->
    <script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>
    <script src="https://cdn.staticfile.org/popper.js/1.12.5/umd/popper.min.js"></script>
    <!--<script src="https://cdn.staticfile.org/twitter-bootstrap/4.1.0/js/bootstrap.min.js"></script>-->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
    <script type="application/x-javascript">
        // var _curNumber = 000001;
    </script>
    <style>
        .responsive {
            width: 100%;
            max-width: 400px;
            height: auto;
        }

        .inputcell {
            width: 200px;
            height: 15px;
            background: #f5f5f5;
            border: 1px solid rgb(221, 221, 221);
            padding: 5px;
            color: blue
        }

        .inputcell[placeholder]:empty:before {
            content: attr(placeholder);
            color: rgb(194, 184, 184);
        }
    </style>
    <style>
        .the-legend {
            border-style: none;
            border-width: 0;
            font-size: 14px;
            line-height: 20px;
            margin-bottom: 0;
            width: auto;
            padding: 0 10px;
        }

        .the-fieldset {
            border: 5px solid #e0e0e0;
            padding: 10px;
        }
    </style>

    <style>
        body {
            font-family: Arial, Helvetica, sans-serif;
        }

        /* Full-width input fields */
        input[type=text], input[type=password] {
            width: 100%;
            padding: 12px 20px;
            margin: 8px 0;
            display: inline-block;
            border: 1px solid #ccc;
            box-sizing: border-box;
        }

        /* Set a style for all buttons */
        button {
            background-color: #4CAF50;
            color: white;
            padding: 14px 20px;
            margin: 8px 0;
            border: none;
            cursor: pointer;
            width: 100%;
        }

        button:hover {
            opacity: 0.8;
        }

        /* Extra styles for the cancel button */
        .cancelbtn {
            width: auto;
            padding: 10px 18px;
            background-color: #f44336;
        }

        /* Center the image and position the close button */
        .imgcontainer {
            text-align: center;
            margin: 24px 0 12px 0;
            position: relative;
        }

        img.avatar {
            width: 40%;
            border-radius: 50%;
        }

        .container {
            padding: 16px;
        }

        span.psw {
            float: right;
            padding-top: 16px;
        }

        /* The Modal (background) */
        .modal {
            display: none; /* Hidden by default */
            position: fixed; /* Stay in place */
            z-index: 1; /* Sit on top */
            left: 0;
            top: 0;
            width: 100%; /* Full width */
            height: 100%; /* Full height */
            overflow: auto; /* Enable scroll if needed */
            background-color: rgb(0, 0, 0); /* Fallback color */
            background-color: rgba(0, 0, 0, 0.4); /* Black w/ opacity */
            padding-top: 60px;
        }

        /* Modal Content/Box */
        .modal-content {
            background-color: #fefefe;
            margin: 5% auto 15% auto; /* 5% from the top, 15% from the bottom and centered */
            border: 1px solid #888;
            width: 80%; /* Could be more or less, depending on screen size */
        }

        /* The Close Button (x) */
        .close {
            position: absolute;
            right: 25px;
            top: 0;
            color: #000;
            font-size: 35px;
            font-weight: bold;
        }

        .close:hover,
        .close:focus {
            color: red;
            cursor: pointer;
        }

        /* Add Zoom Animation */
        .animate {
            -webkit-animation: animatezoom 0.6s;
            animation: animatezoom 0.6s
        }

        @-webkit-keyframes animatezoom {
            from {
                -webkit-transform: scale(0)
            }
            to {
                -webkit-transform: scale(1)
            }
        }

        @keyframes animatezoom {
            from {
                transform: scale(0)
            }
            to {
                transform: scale(1)
            }
        }

        /* Change styles for span and cancel button on extra small screens */
        @media screen and (max-width: 300px) {
            span.psw {
                display: block;
                float: none;
            }

            .cancelbtn {
                width: 100%;
            }
        }
    </style>

    <script>
        function copy2Clipboard(copyText) {
            // var copyText = document.getElementById("myInput");
            copyText.select();
            document.execCommand("copy");
            // alert("Copied the text: " + copyText.value);
        }
        /**
         * Trouble Report: TTyyyymmdd-000001
         * Service Request: SRQyyyymmdd-000001
         **/
        const isTest = false;
        const host = "http://localhost:5000";

        /**
         * -1: error
         *  0: TT
         *  1: SRQ
         * @returns {number}
         */
        function getTicketType() {
            var isTT = document.getElementById("s_fac").checked;
            var isSRQ = document.getElementById("s_fac1").checked;
            var _type = 0;
            if (!isTT && !isSRQ) {
                // alert("Please choose the correct Ticket Number!");
                return -1;
            }
            if (isSRQ) return 1;
            return _type;
        }

        function formatDate(date) {
            var d = new Date(date),
                month = '' + (d.getMonth() + 1),
                day = '' + d.getDate(),
                year = d.getFullYear();

            if (month.length < 2) month = '0' + month;
            if (day.length < 2) day = '0' + day;

            return [year, month, day].join('');
        }

        function FormatNumberLength(num, length) {
            var r = "" + num;
            while (r.length < length) {
                r = "0" + r;
            }
            return r;
        }

        function hideT(type) {
            if (type == 0) {
                $('#tt_cur').show();
                $('#tt_new').show();
                $('#srq_cur').hide();
                $('#srq_new').hide();
            } else if (type == 1) {
                $('#tt_cur').hide();
                $('#tt_new').hide();
                $('#srq_cur').show();
                $('#srq_new').show();
            }
        }

        function showAll() {
            $('#srq_cur').show();
            $('#srq_new').show();
            $('#tt_cur').show();
            $('#tt_new').show();
        }

        function fillForm(ticketType, response) {
            // var _timestamp = formatDate(Date.now());
            // console.log(_timestamp);
            // var t_Num = FormatNumberLength(ticketNumber, 6);
            var _ticketNumber;// = "TT" + formatDate(Date.now()) + "-" + FormatNumberLength(response.newTTNumber, 6);
            hideT(ticketType)
            if (ticketType == 0) {
                // $("#s_fac").css("background-color", "blue");
                // _ticketNumber = "TT" + formatDate(Date.now()) + "-" + FormatNumberLength(response.newTTNumber, 6);
                document.getElementById("tt_cur").innerHTML = "TT" + formatDate(Date.now()) + "-" + FormatNumberLength(response.curTTNumber, 6);
                document.getElementById("tt_new").innerHTML = "TT" + formatDate(Date.now()) + "-" + FormatNumberLength(response.newTTNumber, 6);
                document.getElementById("tt_new").style.backgroundColor = "yellow";
            } else if (ticketType == 1) {
                // _ticketNumber = "SRQ" + formatDate(Date.now()) + "-" + FormatNumberLength(response.newSRQNumber, 6);
                document.getElementById("srq_cur").innerHTML = "SRQ" + formatDate(Date.now()) + "-" + FormatNumberLength(response.curSRQNumber, 6);
                document.getElementById("srq_new").innerHTML = "SRQ" + formatDate(Date.now()) + "-" + FormatNumberLength(response.newSRQNumber, 6);
                document.getElementById("srq_new").style.backgroundColor = "yellow";

                // $("#s_fac1").css("background-color", "blue");
            }
            // document.getElementById("ticket_no").innerHTML = _ticketNumber;
        }

        function _fillForm(ticketType, response) {
            hideT(ticketType)
            if (ticketType == 0) {
                document.getElementById("tt_cur").innerHTML = "TT" + formatDate(Date.now()) + "-" + FormatNumberLength(response.newTTNumber, 6);
                document.getElementById("tt_new").innerHTML = "TT" + formatDate(Date.now()) + "-" + FormatNumberLength(response.newTTNumber + 1, 6);
                document.getElementById("tt_new").style.backgroundColor = "yellow";
                $('#ticket_no').val("TT" + formatDate(Date.now()) + "-" + FormatNumberLength(response.newTTNumber, 6));
            } else if (ticketType == 1) {
                document.getElementById("srq_cur").innerHTML = "SRQ" + formatDate(Date.now()) + "-" + FormatNumberLength(response.newSRQNumber, 6);
                // var srq = response.newSRQNumber++
                document.getElementById("srq_new").innerHTML = "SRQ" + formatDate(Date.now()) + "-" + FormatNumberLength(response.newSRQNumber + 1, 6);
                document.getElementById("srq_new").style.backgroundColor = "yellow";
                $('#ticket_no').val("SRQ" + formatDate(Date.now()) + "-" + FormatNumberLength(response.newSRQNumber, 6));
            }
            $('#ticket_no').show();
            $('#bt_ticketno').show();
            // document.getElementById("ticket_no").value = ticketType;
            // $('#ticket_no').val(ticketType);
        }

        function formalizedTicketNumber(ticketNum) {
            return formatDate(Date.now()) + "-" + FormatNumberLength(ticketNum, 6);
        }

        function initForm(response) {
            // debugger;
            document.getElementById("tt_cur").innerHTML = "TT" + formalizedTicketNumber(response.curTTNumber);
            document.getElementById("tt_new").innerHTML = "";
            // document.getElementById("tt_new").style.backgroundColor = "yellow";
            // document.getElementById("tt_new").innerHTML = "TT" + formatDate(Date.now()) + "-" + FormatNumberLength(response.newTTNumber, 6);
            document.getElementById("srq_cur").innerHTML = "SRQ" + formalizedTicketNumber(response.curSRQNumber);
            document.getElementById("srq_new").innerHTML = "";
            // document.getElementById("srq_new").style.backgroundColor = "yellow";
            // document.getElementById("srq_new").innerHTML = "SRQ" + formatDate(Date.now()) + "-" + FormatNumberLength(response.newSRQNumber, 6);
        }

        function getTicketNumber(ticketType) {
            //debugger;
            if (ticketType == -1) return;
            var _ticketNumber = "";
            // var _type = ticketType ? "TT" : "SRQ";
            // if (isTest) _ticketNumber++;
            var settings = {
                "async": true,
                // 'cache': false,
                // 'dataType': "jsonp",
                "crossDomain": true,
                //"url": host + "/getTicket?type=" + ticketType,
                // "url": "http://localhost:5000/getTicket",
                "url": "http://www.ectivisecloud.com:5000/getTicket",
                "method": "POST",
                "headers": {
                    "Content-Type": "application/json",
                    // "Content-Type": "application/x-www-form-urlencoded",
                    "cache-control": "yes",
                    "Access-Control-Allow-Origin":"*"
                },
                "data": {
                    //TODO: hide the credential into the hide div
                    "token": ",W4HDZJbxP8S)H<-",
                    "ticketType": ticketType,
                    "write": false
                }
            }
            // debugger
            if (isTest) {
                fillForm(ticketType, _ticketNumber);
            } else {
                //debugger;
                $.ajax(settings).done(function (response) {
                    // debugger
                    console.log(response);
                    if (response.errorCode == 0) {
                        fillForm(ticketType, response);
                    } else {
                        alert(response)
                    }
                })
            }
        }

        function initNumber(ticketType) {
            //debugger;
            var _ticketNumber = "";
            var settings = {
                "async": true,
                'cache': false,
                // 'dataType': "jsonp",
                "crossDomain": true,
                //"url": host + "/getTicket?type=" + ticketType,
                // "url": "http://localhost:5000/getTicket",
                "url": "http://www.ectivisecloud.com:5000/getTicket",
                "method": "POST",
                "headers": {
                    "Content-Type": "application/json",
                    // "Content-Type": "application/x-www-form-urlencoded",
                    "cache-control": "yes",
                    "Access-Control-Allow-Origin":"*"
                },
                "data": {
                    //TODO: hide the credential into the hide div
                    "token": ",W4HDZJbxP8S)H<-",
                    "ticketType": 2 //get current numbers
                }
            }
            // debugger
            $.ajax(settings).done(function (response) {
                // debugger
                // console.log(response);
                if (response.errorCode == 0) {
                    initForm(response);
                } else {
                    alert(response)
                }
            })
        }
        function updateClipboard(newClip) {
            navigator.clipboard.writeText(newClip).then(function() {
                /* clipboard successfully set */
            }, function() {
                /* clipboard write failed */
            });
        }
    </script>
</head>
<body>

<script>
    function updateClipboard(newClip) {
        navigator.clipboard.writeText(newClip).then(function() {
            /* clipboard successfully set */
        }, function() {
            /* clipboard write failed */
        });
    }
    $(document).ready(function () {
        console.log("ready!");
        // debugger;
        initNumber();
        showAll();
        $('#ticket_no').hide();
        $('#bt_ticketno').hide();
    })
</script>
<!--<img   alt="Ectivise logo" src="http://qms.ectivisecloud.com/images/ectiviselogo.png" width="80px">-->
<!-- Header -->
<header id="js-header" class="u-header u-header--sticky-top u-header--toggle-section u-header--change-appearance"
        data-header-fix-moment="200"
        data-header-fix-effect="slide">
    <div class="text-center text-lg-left u-header__section u-header__section--hidden u-header__section--light g-bg-white g-brd-bottom g-brd-gray-light-v4 g-py-20">
        <div class="container">
            <div class="row flex-lg-row align-items-center justify-content-lg-start">
                <div class="col-6 col-sm-3 col-lg-2">
                    <!-- Logo -->
                    <a href="#!" class="js-go-to navbar-brand"
                       data-type="static">
                        <img class="img-fluid g-width-150" src="http://www.ectivisecloud.com/logo.png"
                             alt="Ectivise Logo" width="100">
                    </a>
                    <!-- End Logo -->
                </div>

                <div class="col-6 col-sm-9 col-lg-10">
                    <div class="row">
                        <div class="col-sm g-brd-right--sm g-brd-gray-light-v4">
                            <div class="g-pa-10--lg">
                                <span class="icon icon-screen-smartphone g-valign-middle g-font-size-5 g-color-primary g-mr-5"></span>
                                <span class="text-uppercase g-font-size-5"><small>Ectivise Cloud Service 0729</small></span>
                                <!--<strong class="d-block g-pl-25">+65 9155 5044</strong>-->
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</header>
<!-- End Header -->
<div class="container">
    <div hidden>myCredential</div><!-- will use it as API credential -->
    <fieldset class="the-fieldset boarder p-lg-5">
        <legend class="the-legend w-auto">
            <a style="font: large">Service Ticket</a>
        </legend>
        <table class="table">
            <tr>
                <th>Ticket Type</th>
                <th>Current Number</th>
                <th>New Number</th>
            </tr>
            <tr>
                <td>
                    <label for="s_fac" class="checkbox-inline">
                        <input id="s_fac" name="tt" type="checkbox" class="sev_check"><small>Trouble
                        Report</small>
                    </label>
                </td>
                <td style="width:30%" id="tt_cur">TT20190725-00001(test)</td>
                <td style="width:30%" id="tt_new">TT20190725-00002(test)</td>
            </tr>
            <tr>
                <td>
                    <label for="s_fac1" class="checkbox-inline">
                        <input id="s_fac1" name="srq" type="checkbox" class="sev_check"><small>Service
                        Request</small>
                    </label>
                </td>
                <td style="width:30%" id="srq_cur">SRQ20190725-00001(test)</td>
                <td style="width:30%" id="srq_new">SRQ20190725-00002(test)</td>
            </tr>
        </table>
    </fieldset>
    <!--https://jqueryvalidation.org/number-method/-->
    <script src="https://cdn.jsdelivr.net/jquery.validation/1.16.0/jquery.validate.min.js"></script>
    <script src="https://cdn.jsdelivr.net/jquery.validation/1.16.0/additional-methods.min.js"></script>
    <script>
        //TODO validate not working
        // just for the demos, avoids form submit
        jQuery.validator.setDefaults({
            debug: true,
            success: "valid"
        })
    </script>
    <button class="btn btn-lg btn-primary btn-block" type="button" name="button" value="Validate!"
            onclick="cfmFunc('s_fac')">
        Click to Confirm
    </button>
    <!--    <div class="row">-->
    <!--        <div class="col text-center"><p class="font-weight-bold text-uppercase">Ticket Number</p></div>-->
    <!--    </div>-->
    <table class="table table-striped p-lg-5" style="border:1px;border-spacing: 2px;border-collapse: separate;">
        <!--<tr>-->
        <!--<td colspan="2"><p class="font-weight-bold text-uppercase">Package Prices:</p></td>-->
        <!--</tr>-->
        <!--        <tr class="table-basic" id="ticket_no">-->
        <!--            <td style="width:70%">TT20190725-00001</td>-->
        <!--        </tr>-->
    </table>
    <input type="text" value="Hello World ticket number#" id="ticket_no" readonly>
    <button id="bt_ticketno" onclick="myFunction()">Copy Ticket Number</button>
    <script>
        function myFunction() {
            var copyText = document.getElementById("ticket_no");
            copyText.select();
            document.execCommand("copy");
            alert("Copied the text: " + copyText.value);
        }
    </script>

    <script>
        function cfmFunc(cbt) {
            var ticketType = getTicketType();
            if (ticketType != 0 && ticketType != 1) {
                return alert("Nothing to confirm");
            }
            var settings = {
                "async": true,
                'cache': false,
                // 'dataType': "jsonp",
                "crossDomain": true,
                //"url": host + "/getTicket?type=" + ticketType,
                // "url": "http://localhost:5000/getTicket",
                "url": "http://www.ectivisecloud.com:5000/getTicket",
                "method": "POST",
                "headers": {
                    "Content-Type": "application/json",
                    // "Content-Type": "application/x-www-form-urlencoded",
                    "cache-control": "yes",
                    "Access-Control-Allow-Origin":"*"
                },
                "data": {
                    //TODO: hide the credential into the hide div
                    "token": ",W4HDZJbxP8S)H<-",
                    "ticketType": ticketType,
                    "write": true
                }
            }
            $.ajax(settings).done(function (response) {
            debugger
                if (response.errorCode == 0) {
                    var ticket_num = ticketType == 0 ? "TT" + formalizedTicketNumber(response.newTTNumber) : "SRQ" + formalizedTicketNumber(response.newSRQNumber);
                    var confirmBox = confirm("Confirm the number  " + ticket_num + "  ?");
                    if (confirmBox == true) {
                        _fillForm(ticketType, response);
                        alert("Ticket number " + ticket_num + " confirmed\nPlease copy to use in the tracking system");
                    } else {
                        alert("Ticket number canceled");
                    }
                } else {
                    alert(response.message)
                }
            })
        }
    </script>
</div>
<script>
    $('#s_fac').prop('checked', false);
    $('#s_fac1').prop('checked', false);
    $(function () {
        $('.sev_check').click(function (e) {
            $('.sev_check').not(this).prop('checked', false);
            $('#ticket_no').hide();
            $('#bt_ticketno').hide();
            // var _type = getTicketType();
            getTicketNumber(getTicketType());
        });
    })
</script>
</body>
</html>
